<template>
  <div class="main">
    <div class="classify">
      <Title title='地产列表' icon='el-icon-s-home'></Title>
      <!-- <el-row
        type="flex"
        class="content"
        v-for="item in propertyList"
        :key="item.id"
        @click.native="$router.push('/property?id='+item.id)"
      >
        <el-col :span="8">
          <el-row
            type="flex"
            class="content-img"
            justify="center"
            align="middle"
            ><img
              :src="item.category.image" 
              alt=""
          /></el-row>
        </el-col>
        <el-col>
          <div class="borders">
            <el-row type="flex" justify="center">{{item.category.title}}</el-row>
            <el-row type="flex" justify="center" v-html="item.desc"
              ></el-row
            >
          </div>
        </el-col>
      </el-row> -->
      <Content :data='propertyList' route='/property' category='id'></Content>
    <el-row v-if="propertyList.length ==0" type="flex" justify="center" style="margin-top:50px; font-size:30px">
      暂时还没有房源信息!!!
    </el-row>
    </div>
  </div>
</template>

<script>
import Title from '@/components/title'
import Content from '@/components/content'
import {getBuildingList} from '@/api/building'
export default {
  components:{Title,Content},
  data() {
    return {
      propertyList: [],
      category: this.$route.query,
    };
  },
  async created(){
    // 发起请求
    let res = await getBuildingList(this.category)
    console.log(res);
    this.propertyList = res.data

  }
};
</script>

<style lang="less" scoped>
.main {
  padding-bottom: 15px;
}
.classify {
  width: 1200px;
  margin: 0 auto;
}
.content {
  height: 150px;
  margin-top: 15px;
  border: 1px solid #666;

  img {
    cursor: pointer;
    width: 140px;
    height: 140px;
    line-height: 150px;
  }
  .images {
    width: 100%;
    height: 100%;
  }
  .content-img {
    height: 100%;
  }
  .borders {
    height: 90%;
    border-left: 1px solid #666;
    padding-left: 5px;
    margin: 5px 0 5px 0;
  }
}
</style>